<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="../bower_components/babel/browser.js"></script>
    <script src="../bower_components/react/react.development.js"></script>
    <!--<script src="../bower_components/react/react-dom.development.js"></script>-->
    <!--<script src="../node_modules/react/umd/react.development.js"></script>-->
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/prop-types/prop-types.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">

        class ParentDiv extends React.Component{
            constructor(){
                super();
                console.log("初始化");
                this.state = {
                    inputValue: "input value"
                }
            }
            componentWillUnmount(){
                console.log("componentWillUnmount；删除dom")
            }
            componentWillMount(){
                console.log("componentWillMount：开始渲染之前");
                this.setState({
                    inputValue: "componentWillMount"
                })
            }
            componentDidMount(){
                console.log("componentDidMount：渲染后的后续逻辑操作")
            }
            shouldComponentUpdate(){
                console.log("shouldComponentUpdate：是否应该更新组件")
                return true;
            }
            componentDidUpdate(){
                console.log("componentDidUpdate：渲染更新后的后续逻辑操作")
            }
            componentWillUpdate(){
                console.log("componentWillUpdate：更新组件")
            }
            componentWillReceiveProps(){
                console.log("componentWillReceiveProps：获取到新的porp")
            }
            _delDom(){
                var value = ReactDOM.findDOMNode(this.refs.text).value;
                console.log( "值："+value );
                this.setState({
                    inputValue: value
                })
                console.log(ReactDOM.findDOMNode(this.refs.text));
                ReactDOM.unmountComponentAtNode( document.getElementById(ReactDOM.findDOMNode(this.refs.text).id) )
                // ReactDOM.unmountComponentAtNode( ReactDOM.findDOMNode(this.refs.text) );
            }
           render(){
                console.log("渲染");
                return (
                    <div>
                        <input id="text" type="text" ref="text" defaultValue="你猜啊aa" />
                        <input type="text" readOnly value={this.state.inputValue}/>
                        <button onClick={this._delDom.bind(this)}>删除</button>
                    </div>
                );
           }
        };

        var selectDom = ReactDOM.render(
            <ParentDiv/>,
            // exampleDom,
            document.getElementById('app')
        );
    </script>
</body>
</html>